<template>
  <div>
    asdasdas<el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
    <div>
      <h2 v-on:click="divClick">{{ store.why }}</h2>
      <h3>Count now is : {{ store.Why }}</h3>
      <h2>ES 传统方式解构 store , count不会响应式更新</h2>
      <h3 v-on:click="divlist">Count now is :{{ Why }}</h3>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { mainStore } from "../../store/index";
import { storeToRefs } from "pinia";
const store = mainStore();
const { Why } = storeToRefs(store);
const divClick = () => {
  store.$patch((state: any) => {
    state.why = "吴豪阳是帅哥";
  });
};
const divlist = () => {
  store.Why++;
};
</script>

<style scoped></style>
